<template>
	<view class="container">
		<view class="header">
			<img src="/static/cusService.png" alt="">
			<view class="detail">
				<p>您好，您的问题可以通过添加微信客服，我在这里为您解答！</p>
			</view>
		</view>
		<view class="center">
			<view class="qrcode">
				<!-- <view class="bgImg"></view> -->
			</view>
			<view class="photo" @tap="saveImage">
				<p>保存到相册</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: 'https://example.com/demo.jpg' // 图片地址
			}
		},
		methods: {
			saveImage() {
				// 1. 微信小程序：先授权再保存
				// #ifdef MP-WEIXIN
				wx.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							wx.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => this.downloadAndSave(this.imgUrl),
								fail: () => {
									wx.showModal({
										title: '提示',
										content: '需要授权保存到相册',
										success: (m) => m.confirm && wx.openSetting()
									});
								}
							});
						} else {
							this.downloadAndSave(this.imgUrl);
						}
					}
				});
				// #endif

				// 2. App / H5：直接下载（App 需权限插件兜底）
				// #ifndef MP-WEIXIN
				this.downloadAndSave(this.imgUrl);
				// #endif
			},

			downloadAndSave(url) {
				uni.showLoading({
					title: '下载中...'
				});
				uni.downloadFile({
					url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: (e) => {
									uni.hideLoading();
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
									console.error(e);
								}
							});
						} else {
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
						console.error(err);
					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background: linear-gradient(180deg, #BACFFB 0%, #F7ECEC 100%);

		.header {
			padding: 38rpx 46rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.detail {
				p {
					font-size: 32rpx;
					color: #000000;
					padding-left: 16rpx;
				}
			}
		}

		.center {
			display: flex;
			justify-content: center;
			align-items: center;

			.qrcode {
				width: 632rpx;
				height: 632rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				margin: 60rpx;
			}

			.photo {
				width: 254rpx;
				height: 82rpx;
				background: #2D7AF7;
				border-radius: 41rpx 41rpx 41rpx 41rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: fixed;
				bottom: 5%;
				margin: 60rpx;
				color: #fff;
			}
		}


	}
</style>